import React from "react";
import { Form, Input, Button, DatePicker, Select, Row, Col } from "antd";

const { Option } = Select;


@Form.create()
class AdvancedFilter extends React.Component {
  formItemLayout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 19 },
  };

  constructor(props) {
    super(props);
    this.state = {

    };
  }

  componentDidMount() {
    const { getRef } = this.props;
    if (getRef) getRef(this);
  }

  handleReset = () => {
    const { form, handleParamsChange, handleSearch } = this.props;
    form.resetFields();
    handleParamsChange({
      entrustName: '',
      trustee: '', // 受托人
      status: -1,
      startUpdateTime: '',
      endUpdataTime: '',
      flowName: '',
    });
    handleSearch();
  };

  handleSubmit = e => {
    if (e && e.preventDefault) e.preventDefault();
    const { form, handleParamsChange, handleSearch } = this.props;
    form.validateFields((err, values) => {
      if (err) {
        return;
      }
      const { updateTime } = values;
      const params = {...values}

      if (updateTime && updateTime.length > 0) {
        params.startUpdateTime = updateTime[0].format("YYYY-MM-DD HH:mm:ss");
        params.endUpdataTime = updateTime[1].format("YYYY-MM-DD HH:mm:ss");
      } else {
        params.startUpdateTime = "";
        params.endUpdataTime = "";
      }
      if(params.status === "") {
        params.status = -1;
      }
      handleParamsChange(params);
      handleSearch();
    });
  };

  render() {
    const { form, visible } = this.props;
    const { getFieldDecorator } = form;

    return (
      <div className={`filter__box ${!visible ? "box__hidden" : ""}`}>
        <Form layout="horizontal">
          <Row gutter={24}>
            <Col span={8}>
              <Form.Item
                label="委托名称"
                {...this.formItemLayout}
              >
                {getFieldDecorator("entrustName", {
                    initialValue: "",
                  })(
                    <Input
                      className="input__search"
                      style={{ maxWidth: '260px' }}
                      placeholder="请输入委托名称"
                    />,
                  )}
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="受托人"
                {...this.formItemLayout}
              >
                {getFieldDecorator("trustee", {
                    initialValue: "",
                  })(
                    <Input
                      className="input__search"
                      style={{ maxWidth: '260px' }}
                      placeholder="请输入受托人"
                    />,
                  )}
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="状态"
                {...this.formItemLayout}
              >
                {getFieldDecorator("status", {
                    initialValue: "",
                  })(
                    <Select
                      style={{ maxWidth: '260px' }}
                      placeholder="请选择状态"
                    >
                      <Option value={1}>有效</Option>
                      <Option value={0}>无效</Option>
                    </Select>,
                  )}
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={24}>
            {/* <Col span={8}>
              <Form.Item label="更新时间" {...this.formItemLayout}>
                {getFieldDecorator(
                  "updateTime",
                  {},
                )(
                  <RangePicker
                    format="YYYY-MM-DD HH:mm:ss"
                    style={{ maxWidth: '260px' }}
                    placeholder={["开始时间", "结束时间"]}
                    showTime
                  />,
                )}
              </Form.Item>
            </Col> */}
            <Col span={8}>
              <Form.Item label="包含流程名称" {...this.formItemLayout}>
                {getFieldDecorator(
                  "flowName",
                  {},
                )(
                  <Input
                    className="input__search"
                    style={{ maxWidth: '260px' }}
                    placeholder="请输入流程名称"
                  />,
                )}
              </Form.Item>
            </Col>
            <Col span={8}>
              <div className="filter_buttons" style={{ marginTop: "5px",display:'flex',alignItems: 'right',justifyContent: 'center' }}>
                <Button type="primary" onClick={this.handleSubmit}>
                  查询
                </Button>
                <Button onClick={this.handleReset} style={{ marginLeft: "16px" }}>
                  重置
                </Button>
              </div>
            </Col>
          </Row>
        </Form>
      </div>
    );
  }
}
export default AdvancedFilter;
